// useId
// useId 是 React 18 新增的一个 Hook，用于生成稳定的唯一标识符。主要用于解决 SSR 场景下的 ID 不一致问题，或者需要为组件生成唯一 ID 的场景。

// 语法
// const id = useId();
// 返回值: :r0: 多次调用值递增  例如:r1:

// 使用场景
// 1.为组件生成唯一 ID
// 2.解决 SSR 场景下的 ID 不一致问题。
//   为什么会不一致？在服务端渲染（SSR）场景下，组件会在服务端和客户端分别渲染一次。
//   如果使用随机生成的 ID，可能会导致两端渲染结果不一致，引发 hydration 错误。useId 可以确保生成确定性的 ID。
// 3.无障碍交互唯一ID

import { useId } from 'react'
const App = () => {
  const id = useId()
  return (
    <>
      {/* 1.为组件生成唯一 ID */}
      <label htmlFor={id}>点击label聚焦</label>
      <input id={id} type="text" />

      {/* 2.解决 SSR 场景下的 ID 不一致问题 */}
      {/* 用useId生成id。不要用随机数生成id。const randomId = `tooltip-${Math.random()}` */}

      {/* 3.无障碍交互唯一ID */}
      {/* 给元素添加一个唯一的ID，如aria-labelledby="my-label"，然后提示语也绑定对应的id，这样视障用户就知道要做什么 */}
      <input type="text" aria-describedby={id} />
      <p id={id}>请输入有效的电子邮件地址，例如：xiaoman@example.com</p>
    </>
  )
}

export default App
